<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #007bff;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box" onclick="startAnimation()">点我滑动</div>
<script>
    function startAnimation() {
        let box = document.querySelector('.box');
        let distance = 200; //? 滑动的距离
        let duration = 1000; //? 动画持续时间（毫秒）
        let startTime = null;
        let startPosition = box.offsetTop;

        function animate(currentTime) {
            console.log('????',currentTime)
            if (!startTime) startTime = currentTime;
            //? 计算当前时间和开始时间的差 用于比较是否还在duration期间
            let timeElapsed = currentTime - startTime;
            //? 计算当前时间百分比 根据这个调整动画速度
            let percentage = timeElapsed / duration;

            //? 使用缓动函数来实现由快至慢的效果
            let easing = easeOutQuad(percentage);

            //? 计算当前滑动的距离
            let currentPosition = startPosition + (distance * easing);
            box.style.top = currentPosition + 'px';
            //? 在duration时间内反复调用
            if (timeElapsed < duration) {
                requestAnimationFrame(animate);
            }
        }
        //? 缓动函数：由快至慢
        function easeOutQuad(t) {
            return t * (2 - t);
        }
        requestAnimationFrame(animate);
    }

</script>
</body>
</html>
